<template>
    <div id="app">
      <top-header>{{ headerTitle}}</top-header> 
     <search-text :placeholder="placeholder" :maxlength="maxlength"></search-text>
    </div>
    <router-view/> 
         <tab-bar></tab-bar> 
  </template>
  <script>
   
import TopHeader from '@/components/TopHeader/TopHeader.vue'
import TabBar from '@/components/TabBar/TabBar.vue'
import SearchText from '@/components/SearchText/SearchText.vue';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import { watch } from 'vue';
   export default{
    components:{
        TopHeader,
        TabBar,
        SearchText,
    },
    setup(){
        const title=useStore()
        const router=useRouter()
        watch(
          ()=>router.currentRoute.value.name,
          (value)=>{
           title.commit('setHeaderTitle',value)
           title.commit('setmaxlength',value)
           title.commit('setplaceholder',value)
           title.commit('setfield',value)
          }
        )
        return title.state
    }
    
   }
</script>
  <style lang="less">
  
  </style>
  